

<!-- 跨境支付 -->
<template>
	<view style="width: 100%;">
	
		<!-- header部分 -->
		<view class='header-Container header-height'>
			<navHeader colorTheme="white">
			</navHeader>
		</view>
		
		<image class="payLogo" :src="icon.logo"></image>
		
		<view class="payTips">
			跨境商品支付需要获取您的微信用户信息
		</view>
		
		
		<view class="payHandler" @click="miniAppPay_fun()">
			允许
		</view>
		
		<button class="payCancel" open-type="launchApp" app-parameter="miniAppPayFlag=0" @launchapp="launchAppBack" @error="launchAppError">
			暂不
		</button>
		
		
		<!-- 返回App -->
		<view v-if="showGoBackAppModal" class="bg-Container">
			<view class="goBackAppModal-Container">
		
				<view class="title">
					支付成功
				</view>
		
				<view class="btnsOuter-Container">
					<button class="goBackAppBtn-Container" open-type="launchApp" app-parameter="miniAppPayFlag=1" @launchapp="launchAppBack" @error="launchAppError">
						返回App
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	import {
		mapState
	} from 'vuex';
	
	import navHeader from '@/components/nav-header/nav-header';
	
	export default {
		components: {
			navHeader
		},
		computed: {
			...mapState(['imgSite'])
		},
		data() {
			return {
				icon: {
				    logo: '/static/images/user/miniAppPay/logo.png',
				},
				
				orderParentId: '',
				showGoBackAppModal: false
			};
		},
		onLoad(options) {
			this.orderParentId = options.orderParentId;
		},
		// onHide() {
		// 	uni.switchTab({
		// 		url: '/pages/index/index'
		// 	});
		// },
		methods: {
			
			//小程序支付
			miniAppPay_fun() {
				
				var that = this;
				uni.login({
					provider: 'weixin',
					success: function (res) {
						
						var tradeType = "MINAPI";
						var code = res.code;
						
						that.$api.globalUtil.requestAjax({
							url: "/PayApi/wxPayForApi",
							method: "POST",
							data: { 
								orderParentId: that.orderParentId,
								tradeType: tradeType,
								code: code
							},
							success: function(res) {
								
								if(res.data.success) {
									
									console.log(res.data.response);
									var pay = res.data.response;
									uni.requestPayment({
										_debug: true,
										provider: "wxpay",
										orderInfo: "orderId="+that.orderId,
										timeStamp: ""+pay.timestamp,
										nonceStr: pay.nonceStr,
										package: "prepay_id="+pay.prepayId,
										signType: pay.signType,
										paySign: pay.paySign,
										success: function(res) {
											that.$api.msg("支付成功");
											that.showGoBackAppModal = true;
										},
										fail: function(err) {
											that.$api.msg("支付失败");
										}
									});
								}
							},
						});
					},
					fail(err) {
						that.$api.msg(JSON.stringify(err) || "登录失败");
					}
				});
			},
			
			
			//返回app
			launchAppBack() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			launchAppError(e) {
				this.$api.msg(e.detail.errMsg);
			}
		}
	}
</script>

<style lang="less">

	.payLogo {
		display: block;
		margin: 0 auto;
		margin-top: 200rpx;
		width: 140rpx;
		height: 140rpx;
	}
	
	.payTips {
		margin-top: 50rpx;
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		color: #333333;
	}
	
	.payHandler {
		margin: 0 auto;
		margin-top: 200rpx;
		width: 600rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
		background: linear-gradient(-45deg, #CF00B5 0%, #DF1325 100%);
		border-radius: 40rpx;
	}
	
	.payCancel {
		margin: 0 auto;
		margin-top: 50rpx;
		width: 600rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		color: #999999;
		background: #FFFFFF;
		border: 1px solid #ADADAD;
		border-radius: 40rpx;
	}
	
	
	
	.bg-Container {
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99999;
		position: fixed;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);
	
		.goBackAppModal-Container {
			display: flex;
			justify-content: center;
			position: relative;
			width: 600rpx;
			height: 350rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 16rpx;
	
			.title {
				position: absolute;
				top: 0;
				height: 200rpx;
				line-height: 200rpx;
				text-align: center;
				font-size: 40rpx;
				color: rgba(51, 51, 51, 1);
			}
	
			// 底部按钮
			.btnsOuter-Container {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				bottom: 0;
				padding: 0 68rpx;
				width: 100%;
				height: 166rpx;
	
				.goBackAppBtn-Container {
					width: 210rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center;
					font-size: 30rpx;
					font-family: PingFang SC;
					color: rgba(255, 255, 255, 1);
					background: linear-gradient(90deg, rgba(224, 19, 38, 1) 0%, rgba(207, 0, 182, 1) 100%);
					border-radius: 35px;
				}
			}
		}
	}
</style>



